import React, { Component } from 'react'
import axios from 'axios'
 class App extends Component {
 state = {
     arr:[],
     activeIndex:0
 }
  componentDidMount(){ // 相当于vue得mounted
    //   console.log( document.querySelector(".appwrap"));
    axios.get("/list").then(res=>{
        this.setState({
            arr:res.data
        },()=>{
            console.log(this.state.arr);
        })
    })
   // 在这个生命周期中监听右侧盒子得滚动
   setTimeout(()=>{
       window.addEventListener("scroll",this.handSroll,true)
   },100)
  }
  handSroll = ()=> { // 不是通过dom元素绑定得事件都使用箭头函数，可以避免this指向问题
    let topS = this.myref1.scrollTop // 右侧盒子滚动的距离
    // console.log(topS) // 需要知道右侧盒子每个子元素距离浏览器顶部得高度
    console.log(this.myref1.children) // 这是一个伪数组
    let arr = Array.from(this.myref1.children)
    arr.forEach((item,index)=>{
        if (topS > item.offsetTop) {
            this.setState({
                activeIndex:index
            })
        }
    })
  }
  changeIndex(index){
      this.setState({
          activeIndex:index
      })
      console.log(this.myref,111)
      this.myref1.children[index].scrollIntoView({behavior:"smooth"})// 将一个dom节点平话得滚动到浏览器顶部
  }
  render() {
      let {arr} = this.state // 结构赋值，下面arr就代表着this.state.arr
    return (
      <div className='appwrap' ref={ref=> this.myref = ref}>
          {/* <span ref={(ref)=>{return this.myspan = ref}}>1111</span> */}
          <div className='left'>
              {
                  arr && arr.length ? arr.map((item,index)=>{
                      return <h3 key={index} onClick={this.changeIndex.bind(this,index)} className={index == this.state.activeIndex?"active":""}>{item.title}</h3>
                  }):"暂无数据"
              }
          </div>
          <div className='right' ref={ref => this.myref1 = ref}>
              {
                  arr && arr.length ? arr.map((item,index)=>{
                      return ( // 小括号表示可以换行
                        <div key={index}>
                            <h3>{item.title}</h3>
                            <div className='bao'>
                                {
                                    item.children.map((ite,ind)=>{
                                        return <dl key={ind}>
                                            <dt>
                                            {/* 图片必须加alt属性 */}
                                                <img src={ite.img} alt="" />
                                            </dt>
                                            <dd>{ite.name}</dd>
                                        </dl>
                                    })
                                }
                            </div>
                        </div>
                      )
                  }):""
              }
          </div>
      </div>
    )
  }
}

export default App